<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="./css/index2.css"> -->
    <!-- <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script> -->
    <style>
        *{
            
            margin: 0px;
            padding:0px;
            }
            body{
                /* background: url() no-repeat center top; */
            }
            #wrap{
                width: 1090px;
                height: 429px;
                margin: 160px auto;
                border:1px solid #f00;
                overflow: hidden;
            }
            #wrap ul{
                width: 120%;
            }
            #wrap ul li{
                list-style: none;
                width: 100px;
                height: 429px;
                float: left;
            }
            #wrap ul li .txt{
                width: 100px;
                height: 429px;
                background: rgb(0, 0, 0, .5);
                /* overflow: hidden; */
            }
            #wrap ul li .txt p{
                height: 429px;
                padding:0px 42px;
                background: rgb(0, 0, 0, .5);
                color: white;
                font-family: "microsoft yahei";
                font-size:14px;

            }

    </style>

</head>
<body>
    <div id="wrap">
        <ul>
            <li style="background: url(./images/1.jpg);">
                <div class="txt"><p>小米官网</p></div>
            </li>
            <li style="background: url(./images/2.jpg);">
                <div class="txt"><p>小米官网</p></div>
            </li>
            <li style="background: url(./images/3.jpg);">
                <div class="txt"><p>小米官网</p></div>
            </li>
            <li style="background: url(./images/4.jpg);width:789px;">
                <div class="txt"><p>小米官网</p></div>
            </li>
        </ul>
    </div>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script>
        $("#wrap ul li").hover(function(){
            $(this).stop().animate({
                width :'789px'
            },400).siblings().stop().animate({
                width :'100px'
            },400)
        });
    
    </script>
    
</body>
</html>